<template>
    <div class="createPost-container">
      <el-form
      ref="postForm"
      :model="postForm"
      :rules="rules"
      class="form-container"
    >
      <div class="createPost-main-container">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" disabled>
          <template slot="title">
            <i class="header-icon el-icon-info"></i>基本信息
          </template>
          <el-row gutter="80">
            <div class="postInfo-container">
              <el-col :span="12">
                <el-row>
                  <el-form-item
                    prop="projectId"
                    label-width="180px"
                    label="项目编号："
                  >
                    <el-input
                      v-model="postForm.projectId"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    prop="projectName"
                    label-width="180px"
                    label="项目名称："
                  >
                    <el-input
                      v-model="postForm.projectName"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    prop="projectGroupName"
                    label-width="180px"
                    label="所属课题组："
                  >
                    <el-input
                        v-model="postForm.projectGroupName"
                        :maxlength="100"
                        name="name"
                        disabled
                      >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item
                      label-width="180px"
                      label="项目所属部门:"
                      prop="projectDepartment"
                    >
                      <el-input
                        v-model="postForm.projectDepartment"
                        :maxlength="100"
                        name="name"
                        disabled
                      >
                      </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item
                      prop="projectStatus"
                      label-width="180px"
                      label="项目状态："
                    >
                      <el-input
                        v-model="postForm.projectStatus"
                        :maxlength="100"
                        name="name"
                        disabled
                      >
                      </el-input>
                    </el-form-item>
                </el-row>
              </el-col>

              <el-col :span="12">
                <el-row>
                  <el-form-item
                    prop="projectOwnerId"
                    label-width="180px"
                    label="课题组负责人："
                  >
                    <el-input
                      v-model="postForm.projectOwnerName"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    prop="projectOwnerPhone"
                    label-width="180px"
                    label="负责人电话："
                  >
                    <el-input
                      v-model="postForm.projectOwnerPhone"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    prop="projectOwnerEmail"
                    label-width="180px"
                    label="负责人邮箱："
                  >
                    <el-input
                      v-model="postForm.projectOwnerEmail"
                      :maxlength="100"
                      name="name"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-row>
              </el-col>
            </div>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="1" disabled>
            <template slot="title">
              <i class="header-icon el-icon-info"></i>详细信息
            </template>
            <el-row gutter="80">
              <div class="postInfo-container">
                <el-col :span="12">
                    <el-row>
                      <el-form-item
                        label-width="180px"
                        label="项目来源："
                        prop="projectSource"
                      >
                      <el-input
                        v-model="postForm.projectSource"
                        :maxlength="100"
                        name="name"
                        disabled
                      ></el-input>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item
                        label-width="180px"
                        label="项目研究类别："
                        prop="projectCategory"
                      >
                      <el-input
                        v-model="postForm.projectCategory"
                        :maxlength="100"
                        name="name"
                        disabled
                      ></el-input>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item
                        label-width="180px"
                        label="项目级别："
                        prop="projectLevel"
                      >
                      <el-input
                        v-model="postForm.projectLevel"
                        :maxlength="100"
                        name="name"
                        disabled
                      ></el-input>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item
                        style="margin-bottom: 40px"
                        label-width="180px"
                        label="成果形式："
                        prop="projectResultForm"
                      >
                        <el-input
                          v-model.number="postForm.projectResultForm"
                          class="article-textarea"
                          disabled
                        />
                      </el-form-item>
                    </el-row>
                    <el-row>
                          <el-form-item
                            label-width="180px"
                            label="立项报告："
                          >
                            <el-upload
                              v-if="postForm.projectAttachFileName"
                              class="file-uploader"
                              action="http://localhost:3001/api/projects/upload"
                              :limit="1"
                              :on-preview="handlePreview"
                              :file-list="attachFileList"
                              disabled
                            >
                            </el-upload>
                            <el-alert
                              v-if="!postForm.projectAttachFileName"
                              title="暂无相关数据！"
                              type="info"
                              :closable="false">
                            </el-alert>
                          </el-form-item>
                    </el-row>
                    <el-row>
                          <el-form-item
                            label-width="180px"
                            label="中检报告："
                          >
                            <el-upload
                              v-if="postForm.projectMidReportName"
                              class="file-uploader"
                              action="http://localhost:3001/api/projects/upload"
                              :limit="1"
                              :on-preview="handlePreview"
                              :file-list="midFileList"
                              disabled
                            >
                              <el-button size="small" type="primary"
                                >点击上传</el-button
                              >
                              <div slot="tip" class="el-upload__tip">
                                .docs 文件小于500kb
                              </div>
                            </el-upload>
                            <el-alert
                              v-if="!postForm.projectMidReportName"
                              title="暂无相关数据！"
                              type="info"
                              :closable="false">
                            </el-alert>
                          </el-form-item>
                    </el-row>
                    <el-row>
                          <el-form-item
                            label-width="180px"
                            label="结项报告："
                          >
                            <el-upload
                              v-if="postForm.projectFinalReportName"
                              class="file-uploader"
                              action="http://localhost:3001/api/projects/upload"
                              :limit="1"
                              :on-preview="handlePreview"
                              :file-list="finalFileList"
                              disabled
                            >
                            </el-upload>
                            <el-alert
                              v-if="!postForm.projectFinalReportName"
                              title="暂无相关数据！"
                              type="info"
                              :closable="false">
                            </el-alert>
                          </el-form-item>
                    </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-form-item
                      style="margin-bottom: 40px"
                      label-width="180px"
                      label="项目研究方向："
                      prop="projectDirection"
                    >
                      <el-input
                        v-model.number="postForm.projectDirection"
                        class="article-textarea"
                        disabled
                      />
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item
                      style="margin-bottom: 40px"
                      label-width="180px"
                      label="项目主要研究内容："
                    >
                      <el-input
                        v-model="postForm.projectResearchDirection"
                        type="textarea"
                        disabled
                      />
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item
                      label-width="180px"
                      label="项目统计年度："
                      class="postInfo-container-item"
                      prop="projectStatisticalYear"
                    >
                    <el-date-picker
                      v-model="postForm.projectStatisticalYear"
                      type="year"
                      value-format="yyyy"
                      placeholder="选择项目统计年度"
                      disabled
                    >
                    </el-date-picker>
                    </el-form-item>
                  </el-row>
                </el-col>
              </div>
            </el-row>
        </el-collapse-item>
        <el-collapse-item name="1">
            <template slot="title">
              <i class="header-icon el-icon-info"></i>经费信息
            </template>
            <el-row>
              <el-form-item
                label-width="230px"
                label="项目申请经费分项："
                class="postInfo-container-item"
                prop="projectAppliedCostItems"
              >
                <el-table
                  class="appropriation-table"
                  :data="postForm.projectAppliedCostItems"
                  border
                  disabled
                >
                  <el-table-column label="经费预算科目" width="300px" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.id}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="预算标准（万元）" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.appropriation}}</span>
                    </template>
                  </el-table-column>
<!--                  <el-table-column label="起始日期" align="center">-->
<!--                    <template slot-scope="{ row }">-->
<!--                      <span>{{ row.startDate}}</span>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="结束日期" align="center">-->
<!--                    <template slot-scope="{ row }">-->
<!--                      <span>{{ row.endDate}}</span>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
                </el-table>
              </el-form-item>
            </el-row>
            <el-row v-if="isCostChange && changeForm.projectAppliedCost">
              <el-form-item
                label-width="230px"
                label="项目申请经费分项（变更）："
                class="postInfo-container-item"
                prop="projectAppliedCostItems"
              >
                <el-table
                  class="appropriation-table"
                  :data="changeForm.projectAppliedCostItems"
                  border
                  disabled
                >
                  <el-table-column label="经费预算科目" width="300px" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.id}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="预算标准（万元）" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.appropriation}}</span>
                    </template>
                  </el-table-column>
<!--                  <el-table-column label="起始日期" align="center">-->
<!--                    <template slot-scope="{ row }">-->
<!--                      <span>{{ row.startDate}}</span>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="结束日期" align="center">-->
<!--                    <template slot-scope="{ row }">-->
<!--                      <span>{{ row.endDate}}</span>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
                </el-table>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectAppliedCost"
                label-width="230px"
                label="项目申请经费总额（万元）："
              >
                <el-input
                  v-model="postForm.projectAppliedCost"
                  :maxlength="100"
                  name="name"
                  disabled
                >
                </el-input>
              </el-form-item>
            </el-row>
            <el-row v-if="isCostChange && changeForm.projectAppliedCost">
              <el-form-item
                style="margin-bottom: 40px"
                prop="changeProjectAppliedCost"
                label-width="230px"
                label="项目申请经费总额（万元）(变更)："
              >
                <el-input
                  v-model="changeForm.projectAppliedCost"
                  :maxlength="100"
                  name="name"
                  disabled
                >
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectApprovedCost"
                label-width="230px"
                label="项目批准经费："
              >
                <el-input
                  v-model="postForm.projectApprovedCost"
                  :maxlength="100"
                  name="name"
                  :disabled="approveType != '立项经费审批'"
                >
                </el-input>
              </el-form-item>
            </el-row>
        </el-collapse-item>
        <el-collapse-item name="1" disabled>
            <template slot="title">
              <i class="header-icon el-icon-info"></i>成员信息
            </template>
            <el-row>
              <el-form-item
                label-width="230px"
                class="postInfo-container-item"
                prop="projectMembers"
              >
                <el-table
                  class="appropriation-table"
                  :data="members"
                  border
                >
                  <el-table-column label="队员身份" width="300px" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userProjectRole}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="员工编号" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.employeeId}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="姓名" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="性别" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userGender}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="电话" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userCellphone}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-row>
            <el-row v-if="isMemberChange && changeForm.projectMembers"><span>变更：</span></el-row>
            <el-row v-if="isMemberChange && changeForm.projectMembers">
              <el-form-item
                label-width="230px"
                class="postInfo-container-item"
                prop="changeProjectMembers"
              >
                <el-table
                  class="appropriation-table"
                  :data="changeForm.projectMembers"
                  border
                >
                  <el-table-column label="队员身份" width="300px" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userProjectRole}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="员工编号" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.employeeId}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="姓名" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="性别" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userGender}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="电话" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.userCellphone}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-row>
        </el-collapse-item>
        <el-collapse-item name="1" disabled>
            <template slot="title">
              <i class="header-icon el-icon-info"></i>时间信息
            </template>
            <el-row gutter="80">
              <el-col :span="12">
                <div class="postInfo-container">
                  <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectDeclareDate"
                label-width="180px"
                label="项目申请日期："
              >
              <el-date-picker
                  v-model="postForm.projectDeclareDate"
                  type="date"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectCreatedDate"
                label-width="180px"
                label="项目立项日期："
              >
                <el-date-picker
                  v-model="postForm.projectCreatedDate"
                  type="date"
                  placeholder="立项日期"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectStartDate"
                label-width="180px"
                label="项目开始日期："
              >
                <el-date-picker
                  v-model="postForm.projectStartDate"
                  type="date"
                  placeholder="开始日期"
                  disabled
                >
                </el-date-picker>
              </el-form-item>

            </el-row>
            <el-row v-if="isDateChange && changeForm.projectStartDate">
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectStartDate"
                label-width="180px"
                label="项目开始日期（变更）："
              >
                <el-date-picker
                  v-model="changeForm.projectStartDate"
                  type="date"
                  placeholder="开始日期"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
            </el-row>
                </div>
              </el-col>
              <el-col :span="12">
              <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectExpectedEndDate"
                label-width="180px"
                label="项目计划结项日期："
              >
                <el-date-picker
                  v-model="postForm.projectExpectedEndDate"
                  type="date"
                  placeholder="计划结项日期"
                  disabled
                >
                </el-date-picker>
                </el-form-item>
                </el-row>
              <el-row v-if="isDateChange && changeForm.projectExpectedEndDate">
              <el-form-item
                style="margin-bottom: 40px"
                prop="changeProjectExpectedEndDate"
                label-width="180px"
                label="项目计划结项日期（变更）："
              >
                <el-date-picker
                  v-model="changeForm.projectExpectedEndDate"
                  type="date"
                  placeholder="计划结项日期"
                  disabled
                >
                </el-date-picker>
                </el-form-item>
                </el-row>
                <el-row>
              <el-form-item
                style="margin-bottom: 40px"
                prop="projectEndDate"
                label-width="180px"
                label="项目实际结项日期："
              >
                <el-date-picker
                  v-model="postForm.projectEndDate"
                  type="date"
                  placeholder="实际结项日期"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
                </el-row>
              </el-col>
            </el-row>
        </el-collapse-item>
        <el-collapse-item name="1" disabled>
            <template slot="title">
              <i class="header-icon el-icon-info"></i>审批履历
            </template>
            <el-row>
              <el-form-item
                label-width="230px"
                class="postInfo-container-item"
                prop="projectInformationCheckHistory"
              >
                <el-table
                  class="appropriation-table"
                  :data="postForm.projectInformationCheckHistory"
                  border
                >
                  <el-table-column label="名称" width="300px" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="审批者" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.operatorName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="审批" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.status}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="意见" align="center">
                    <template slot-scope="{ row }">
                      <span>{{ row.description}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-row>
        </el-collapse-item>
      </el-collapse>
      <div class="approve-container">
        <div class="approve-approver-container">
           <div class="approve-type-title">{{ approveType }}:</div>
        </div>
        <div class="approve-divider"></div>
        <div class="approve-action-container">
            <el-row>
            <el-form-item
                  style="margin-bottom: 40px"
                  prop="researcherHonor"
                  label-width="180px"
                  label="操作："
                >
                <template>
            <el-radio
                v-model="approveStatus"
                label="通过"
             >通过</el-radio>
            <el-radio
                v-model="approveStatus"
                label="驳回"
            >驳回</el-radio>
        </template>
        </el-form-item>
        <el-form-item
                  style="margin-bottom: 40px"
                  label-width="180px"
                  label="意见："
                >
                  <el-input
                    v-model="approveComment"
                    type="textarea"
                    class=""
                    :autosize="{ minRows: 4, maxRows: 8 }"
                    placeholder="请输入审批意见"
                  />
                </el-form-item>
            </el-row>
            <el-row>
                <el-button
          v-loading="loading"
          style="margin-left: 180px; width: 100px"
          type="success"
          @click="submitForm"
        >
          确认
        </el-button>
        <el-button
          v-loading="loading"
          style="margin-left: 100px; width: 100px"
          type="success"
          @click="$router.push(`/project/approve/list`)"
        >
          返回
        </el-button>
            </el-row>
        </div>
      </div>

    </div>
  </el-form>
  </div>
  </template>

  <script>
  import { fetchProjectById, updateProjectApprove } from "@/api/project";
  import { fetchResearchGroupById } from "@/api/research-group";
  import { fetchProjectChangeById } from "@/api/project-change";
  import { generateNewDate } from '@/utils/date';
  import { mapGetters } from "vuex";

  const defaultForm = {
    projectId: "", // 项目编号
    projectName: "", // 项目名称
    projectDeclareId: null,// 项目申报题目id
    projectDeclareName: "", // 项目申报题目
    projectGroupId: null, // 课题组id
    projectGroupName: "", // 课题组名称
    projectOwnerId: null, // 项目负责人ID
    projectOwnerEmployeeId: "", // 项目负责人编号
    projectOwnerName: "", // 项目负责人名字
    projectOwnerPhone: "", // 项目负责人电话
    projectOwnerEmail: "", // 项目负责人邮箱
    projectDepartment: "", // 项目所属部门
    projectSource: "",
    projectCategory: "",
    projectLevel: "",
    projectDirection: "",
    projectResearchDirection: "",
    projectStatus: "项目未立项", // 项目状态
    projectDeclareDate: null,
    projectCreatedDate: null,
    projectStartDate: null,
    projectExpectedEndDate: null,
    projectEndDate: null,
    projectApprovedCost: null, // 项目已批准经费
    projectAppliedCost: null,
    projectAppliedCostItems: [],
    projectResultForm: "",
    projectStatisticalYear: null, // 项目统计年度
    projectAttachFileName: "", // 项目立项报告名字
    projectAttachFileUrl: "", // 项目立项报告地址
    projectChangeReport: "", // 项目变更证明材料
    projectChangeReportName: "", // 项目变更证明材料名称
    projectChangeDescription: "", // 项目变更说明
    projectEthicalApproverId1: 0,
    projectEthicalApproverName1: "",
    projectEthicalApproverId2: 0,
    projectEthicalApproverName2: "",
    projectCostApproverId: null,
    projectCostApproverName: "",
    projectPreApproverId: null,
    projectPreApproverName: "",
    projectEndApproverId: null,
    projectEndApproverName: "",
    projectMidReportName: "", // 项目中检文件名
    projectMidReport: "", // 项目中检报告
    projectMidDate: null, // 项目中检日期
    projectMidDescription: "", // 项目中检说明
    projectFinalReportName: "", // 项目结项文件名
    projectFinalReport: "", // 项目结项报告
    projectFinalDate: null, // 项目结项日期
    projectFinalDescription: "", // 项目结项说明
    projectMidApproverId: null, // 项目中检者ID
    projectMidApproverName: "", // 项目中检者名字
    projectFinalApproverId: null, // 项目结项者ID
    projectFinalApproverName: "", // 项目结项者名字
    projectCheckStatus: "提交项目中检报告", // 项目审批状态
    projectCheckHistory: null, // 项目审批履历
    projectChangeHistory: null,
    projectApplicantId: null,
    projectApplicantName: "",
    projectInformationCheckStatus: "科研处立项预审中", // 项目信息审核状态
    projectInformationCheckHistory: null,
    projectChangeStatus: null, // 项目变更状态
    projectEthicCheckCount: 0, // 伦理审批通过个数
    id: undefined,
  };

  const defaultChangeForm = {
    pId: "", // 项目id
    projectId: "", // 项目编号
    projectName: "", // 项目名称
    projectOwnerId: null, // 项目负责人ID
    projectOwnerEmployeeId: "", // 项目负责人编号
    projectOwnerName: "", // 项目负责人名字
    projectOwnerPhone: "", // 项目负责人电话
    projectOwnerEmail: "", // 项目负责人邮箱
    projectDepartment: "", // 项目所属部门
    projectChangeRequestorId: null,
    projectChangeRequestorName: "",
    projectChangeType: "",
    projectMembers: [],
    projectAppliedCost: null,
    projectAppliedCostItems: [],
    projectCreatedDate: null,
    projectStartDate: null,
    projectExpectedEndDate: null,
    projectCheckStatus: "",
    projectChangeRequestDate: null,
    projectReviewComment: "",
    projectReviewerId: null,
    projectReviewerName: "",
    projectReviewerDate: null,
    projectGroupName: "",
    projectGroupId: null,
    projectStatus: "",
    id: undefined,
  };

  export default {
    name: "ProjectDetail",
    props: {
      isPre: {
        type: Boolean,
        default: false,
      },
      isEthic: {
        type: Boolean,
        default: false,
      },
      isFinal: {
        type: Boolean,
        default: false,
      },
      isCost: {
        type: Boolean,
        default: false,
      },
      isChange: {
        type: Boolean,
        default: false,
      },
      isMid: {
        type: Boolean,
        default: false,
      },
      isEnd: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      const validateApproveCost = (rule, value, callback) => {
      if (this.approveType === '立项经费审批' && (!value || value === "" || value <=0)) {
        callback(new Error("此为必填项, 且批准经费必须大于0"));
      } else {
        callback();
      }
      };
      return {
        postForm: Object.assign({}, defaultForm),
        changeForm: Object.assign({}, defaultChangeForm),
        loading: false,
        isMemberChange: false,
        isDateChange: false,
        isCostChange: false,
        approveType: "", // 立项预审，立项伦理审批，立项总审批，立项经费审批，变更审批，中检审批，结项审批
        approveStatus: "通过",
        approveComment: "",
        activeNames: ["1"],
        attachFileList: [],
        midFileList: [],
        endFileList: [],
        members: [],
        rules: {
          projectApprovedCost: [{ required: true, validator: validateApproveCost }],
      }
      };
    },
    computed: {
    ...mapGetters(["id", "name"]),
    },
    created() {
      const id = this.$route.params && this.$route.params.id;
      const changeId = this.$route.params && this.$route.params.changeid;
      this.fetchData(id, changeId);
    },
    methods: {
      handlePreview(file) {
        let a = document.createElement('a');
        let event = new MouseEvent('click');
        a.download = file.name;
        a.href = file.response? `http://localhost:3001/${file.response.srcurl}` : file.url;
        a.dispatchEvent(event);
        console.log(file);
      },
      fetchData(id, changeId) {
        this.loading = true;
        fetchProjectById(id)
          .then((res) => {
            this.postForm = res.data[0];
            this.attachFileList = this.postForm.projectAttachFileName
              ? [
                  {
                    name: this.postForm.projectAttachFileName,
                    url: this.postForm.projectAttachFileUrl,
                  },
                ]
              : [];
            this.midFileList = this.postForm.projectMidReportName
                ? [
                    {
                      name: this.postForm.projectMidReportName,
                      url: this.postForm.projectMidReport,
                    },
                  ]
                : [];
            this.finalFileList = this.postForm.projectFinalReportName
                ? [
                    {
                      name: this.postForm.projectFinalReportName,
                      url: this.postForm.projectFinalReport,
                    },
                  ]
                : [];
            this.postForm.projectAppliedCostItems =
              this.postForm.projectAppliedCostItems?.length > 0
                ? JSON.parse(this.postForm.projectAppliedCostItems)
                : [];
            this.postForm.projectInformationCheckHistory =
              this.postForm.projectInformationCheckHistory?.length > 0
                ? JSON.parse(this.postForm.projectInformationCheckHistory)
                : [];
            this.postForm.projectChangeHistory =
              this.postForm.projectChangeHistory?.length > 0
                ? JSON.parse(this.postForm.projectChangeHistory)
                : [];
            fetchResearchGroupById(this.postForm.projectGroupId)
              .then((res) => {
                this.members = res.data[0].researchGroupMembers?.length > 0
                  ? JSON.parse(res.data[0].researchGroupMembers)
                  : [];
                this.loading = false;
              })
              .catch((err) => {
                console.log(err);
              });

            if (this.isPre) {
              this.approveType = "立项预审";
            } else if (this.isEthic) {
              this.approveType = "立项伦理审批";
            } else if (this.isFinal) {
              this.approveType = "立项总审批";
            } else if (this.isCost) {
              this.approveType = "立项经费审批";
            } else if (this.isChange) {
              this.approveType = "变更审批";
              fetchProjectChangeById(changeId)
                .then((res) => {
                this.changeForm = res.data[0];
                if (this.changeForm.projectChangeType === "成员变更") {
                  this.isMemberChange = true;
                } else if (this.changeForm.projectChangeType === "经费变更") {
                  this.isCostChange = true;
                } else {
                  this.isDateChange = true;
                }
                this.changeForm.projectAppliedCostItems =
                this.changeForm.projectAppliedCostItems?.length > 0
                    ? JSON.parse(this.changeForm.projectAppliedCostItems)
                    : [];
                this.changeForm.projectMembers = this.changeForm.projectMembers?.length > 0
                ? JSON.parse(this.changeForm.projectMembers)
                : [];
              })
            } else if (this.isMid) {
              this.approveType = "中检审批";
            } else if (this.isEnd) {
              this.approveType = "结项审批";
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      addChangeForm() {
        this.changeForm = {
          pId: this.postForm.id,
          projectId: this.postForm.projectId,
          projectName: this.postForm.projectName,
          projectOwnerId: this.postForm.projectOwnerId,
          projectOwnerEmployeeId: this.postForm.projectOwnerEmployeeId,
          projectOwnerName: this.postForm.projectOwnerName,
          projectOwnerPhone: this.postForm.projectOwnerPhone,
          projectOwnerEmail: this.postForm.projectOwnerEmail,
          projectDepartment: this.postForm.projectDepartment,
          projectChangeRequestorId: null,
          projectChangeRequestorName: "",
          projectChangeType: "",
          projectMembers: [],
          projectAppliedCost: null,
          projectAppliedCostItems: [],
          projectCreatedDate: this.postForm.projectCreatedDate,
          projectStartDate: null,
          projectExpectedEndDate: null,
          projectCheckStatus: "",
          projectChangeRequestDate: null,
          projectReviewComment: "",
          projectReviewerId: null,
          projectReviewerName: "",
          projectReviewerDate: null,
          projectGroupName: this.postForm.projectGroupName,
          projectGroupId: this.postForm.projectGroupId,
          projectStatus: this.postForm.projectStatus,
        }
      },
      submitForm() {
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let passStatus = '';

          if (this.isPre) {
              // this.approveType = "立项预审";
              if(this.approveStatus === "通过") {
                this.postForm.projectInformationCheckStatus = "专家立项伦理审查中";
                passStatus = '同意';
              } else {
                this.postForm.projectInformationCheckStatus = "科研处立项预审驳回";
                passStatus = '驳回';
              }
              this.postForm.projectPreApproverId = this.id;
              this.postForm.projectPreApproverName = this.name;
              this.postForm.projectInformationCheckHistory.push({
                name: this.approveType,
                operatorName: this.name,
                operatorId: this.id,
                status: passStatus,
                description: this.approveComment
              })
            } else if (this.isEthic) {
              // this.approveType = "立项伦理审批";
              if(this.approveStatus === "通过") {
                passStatus = '同意';
                if (this.postForm.projectEthicCheckCount === 0) {
                  this.postForm.projectInformationCheckStatus = "专家立项伦理审查中";
                  this.postForm.projectEthicalApproverId1 = this.id;
                  this.postForm.projectEthicalApproverName1 = this.name;
                } else {
                  this.postForm.projectInformationCheckStatus = "领导立项总审查中";
                  this.postForm.projectEthicalApproverId2 = this.id;
                  this.postForm.projectEthicalApproverName2 = this.name;
                }
                this.postForm.projectEthicCheckCount = this.postForm.projectEthicCheckCount + 1;
              } else {
                if (this.postForm.projectEthicCheckCount === 0) {
                  this.postForm.projectEthicalApproverId1 = this.id;
                  this.postForm.projectEthicalApproverName1 = this.name;
                } else {
                  this.postForm.projectEthicalApproverId2 = this.id;
                  this.postForm.projectEthicalApproverName2 = this.name;
                }
                passStatus = '驳回';
                this.postForm.projectInformationCheckStatus = "专家立项伦理审查驳回";
              }
              this.postForm.projectInformationCheckHistory.push({
                name: this.approveType,
                operatorName: this.name,
                operatorId: this.id,
                status: passStatus,
                description: this.approveComment
              })
            } else if (this.isFinal) {
              // this.approveType = "立项总审批";
              if(this.approveStatus === "通过") {
                passStatus = '同意';
                this.postForm.projectInformationCheckStatus = "财务立项审查中";
              } else {
                passStatus = '驳回';
                this.postForm.projectInformationCheckStatus = "领导立项总审查驳回";
              }
              this.postForm.projectEndApproverId = this.id;
              this.postForm.projectEndApproverName = this.name;
              this.postForm.projectInformationCheckHistory.push({
                name: this.approveType,
                operatorName: this.name,
                operatorId: this.id,
                status: passStatus,
                description: this.approveComment
              })
            } else if (this.isCost) {
              // this.approveType = "立项经费审批";
              if(this.approveStatus === "通过") {
                passStatus = '同意';
                this.postForm.projectInformationCheckStatus = "立项审查通过";
                this.postForm.projectStatus = "项目进行中";
                this.postForm.projectCreatedDate = generateNewDate();
                this.addChangeForm();
              } else {
                passStatus = '驳回';
                this.postForm.projectInformationCheckStatus = "财务立项审查驳回";
              }
              this.postForm.projectCostApproverId = this.id;
              this.postForm.projectCostApproverName = this.name;
              this.postForm.projectInformationCheckHistory.push({
                name: this.approveType,
                operatorName: this.name,
                operatorId: this.id,
                status: passStatus,
                description: this.approveComment
              })
            } else if (this.isChange) {
              // this.approveType = "变更审批";
              if (this.isMemberChange) {
                if (this.approveStatus === "通过") {
                  this.changeForm.projectCheckStatus = "通过";
                } else {
                  this.changeForm.projectCheckStatus = "驳回";
                }
              } else if (this.isCostChange = true) {
                if (this.approveStatus === "通过") {
                  this.postForm.projectAppliedCost = this.changeForm.projectAppliedCost;
                  this.postForm.projectAppliedCostItems = this.changeForm.projectAppliedCostItems;
                  this.changeForm.projectCheckStatus = "通过";
                } else {
                  this.changeForm.projectCheckStatus = "驳回";
                }
              } else {
                if (this.approveStatus === "通过") {
                  if (this.changeForm.projectStartDate) {
                    this.postForm.projectStartDate = this.changeForm.projectStartDate;
                  }
                  if (this.changeForm.projectExpectedEndDate) {
                    this.postForm.projectExpectedEndDate = this.changeForm.projectExpectedEndDate;
                  }
                  this.changeForm.projectCheckStatus = "通过";
                } else {
                  this.changeForm.projectCheckStatus = "驳回";
                }
              }
              this.changeForm.projectReviewComment = this.approveComment;
              this.changeForm.projectReviewerId = this.id;
              this.changeForm.projectReviewerName = this.name;
              this.changeForm.projectReviewerDate = generateNewDate();
              this.postForm.projectChangeHistory.push({
                    projectReviewerId: this.changeForm.projectReviewerId,
                    projectReviewerName: this.changeForm.projectReviewerName,
                    projectReviewComment: this.projectReviewComment,
                    projectReviewerDate: this.projectReviewerDate,
                    ChangeStatus: this.changeForm.projectCheckStatus
              })
            } else if (this.isMid) {
              // this.approveType = "中检审批";
              if (this.approveStatus === "通过") {
                this.postForm.projectCheckStatus = "提交项目结项报告";
              } else {
                this.postForm.projectCheckStatus = "项目中期报告审批驳回";
              }
              this.postForm.projectMidDate = generateNewDate();
              this.postForm.projectMidDescription = this.approveComment;
              this.postForm.projectMidApproverId = this.id;
              this.postForm.projectMidApproverName = this.name;
              this.changeForm.projectCheckStatus = this.postForm.projectCheckStatus;
            } else if (this.isEnd) {
              // this.approveType = "结项审批";
              if (this.approveStatus === "通过") {
                this.postForm.projectCheckStatus = "项目已结项";
                this.postForm.projectStatus = "项目已结项";
                this.postForm.projectEndDate = generateNewDate();
              } else {
                this.postForm.projectCheckStatus = "项目结项报告审批驳回";
              }
              this.postForm.projectFinalDate = generateNewDate();
              this.postForm.projectFinalDescription = this.approveComment;
              this.postForm.projectFinalApproverId = this.id;
              this.postForm.projectFinalApproverName = this.name;
              this.changeForm.projectCheckStatus = this.postForm.projectCheckStatus;
              this.changeForm.projectStatus = this.postForm.projectStatus;
            }
            updateProjectApprove(this.postForm.id,
              {projectForm: this.postForm, changeForm: this.changeForm,
                isChange: this.isChange, isMemberChange: this.isMemberChange}) // need to add
              .then((res) => {
                if (res.data) {
                  this.$router.push("/project/approve/list");
                  this.$message({
                    title: "成功",
                    message: "审批信息保成功",
                    type: "success",
                    duration: 2000,
                  });
                } else {
                  this.$message({
                    message: "审批信息保存失败",
                    type: "error",
                  });
                }
                this.loading = false;
              })
              .catch((err) => {
                this.loading = false;
              });
        } else {
          console.log("审批信息保存失败");
          return false;
        }
      });
    },
    },
  };
  </script>

  <style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .createPost-container {
    position: relative;

    .steps {
      margin: 50px 0 30px 0;
    }

    .file-uploader .el-upload {
      border: 1px dashed #d9d9d9 !important;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .file-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .createPost-main-container {
      padding: 40px 45px 20px 50px;

      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;

        .postInfo-container-item {
          float: left;
        }
      }
    }
  }

  .identity-container {
    margin-top: 50px;
  }

  .approve-container {
    border: 1px solid #ebebeb;
    border-radius: 3px;

    .approve-approver-container {
      padding: 16px 0 16px 5px;
    }

    .approve-action-container {
        padding-bottom: 16px;;
      }

    .approve-divider {
      background-color: #fafafa;
      border-top: 1px solid #eaeefb;
      overflow: hidden;
      height: 0;
    }
  }
  </style>
